<header>
  <h1>druid {{ env ? env : 'cluster' }}</h1>
  <site-nav></site-nav>
</header>

<div class="primary-view data-source-view">
  <ol class="breadcrumb">
    <li><a ui-sref="dataSources">datasources</a></li>
    <li class="active">
      {{ dataSource.id }}
      <span ng-controller="DataSourceDisableCtrl">
        <button class="btn btn-default btn-xs" ng-click="open()"><span class="fa fa-trash-o fa-lg"></span> disable</button>
      </span>
    </li>
  </ol>

  <div class="rules">
    <h2>
      <span ng-if="dataSource.hasOwnProperty('rules')">
        {{ dataSource.rules.length  }}
      </span>
      Rule{{ dataSource.rules.length == 1 ? '' : 's' }}
      <span ng-controller="RuleEditorCtrl" ng-show="dataSource.hasOwnProperty('rules')">
        <button class="btn btn-default btn-xs" ng-click="open()"><span class="fa fa-pencil"></span> edit rules</button>
      </span>

      <div class="footprint">
        <div ng-repeat="(tier, tierData) in dataSource.tiers">
          <span class="size">{{ tierData.size | bytes }}</span>
          in
          <span class="tier" ng-class="tier">{{ tier | tierName }}</span>
        </div>
      </div>
    </h2>

    <div class="rule" ng-repeat="rule in dataSource.rules">
      <div>
        <span class="type">
          <span ng-class="rule.direction">{{ rule.direction }}</span>{{ rule.type.substr(4) }}
        </span>
        <span class="default" ng-if="rule.default">(default)</span>
      </div>

      <div class="period" ng-if="rule.period">
        <span class="value">{{ rule.period }}</span>
        <span class="human">({{ rule.momentInterval.period().humanize() }})</span>
      </div>

      <div class="interval" ng-if="rule.interval">
        <span class="value">{{ rule.interval }}</span>
        <span class="human">({{ rule.momentInterval.period().humanize() }})</span>
      </div>

      <div class="replicants">
        <div class="replicant" ng-repeat="(tier, n) in rule.tieredReplicants">
          <span class="value">{{ n }}</span> in
          <span class="tier" ng-class="tier">{{ tier | tierName}}</span>
        </div>
      </div>
    </div>

    <div class="rule" ng-repeat="rule in defaultRules">
      <div>
        <span class="type">
          <span ng-class="rule.direction">{{ rule.direction }}</span>{{ rule.type.substr(4) }}
        </span>
        <span class="default" ng-if="rule.default">(default rule)</span>
      </div>

      <div class="period" ng-if="rule.period">
        <span class="value">{{ rule.period }}</span>
        <span class="human">({{ rule.momentInterval.period().humanize() }})</span>
      </div>

      <div class="interval" ng-if="rule.interval">
        <span class="value">{{ rule.interval }}</span>
        <span class="human">({{ rule.momentInterval.period().humanize() }})</span>
      </div>

      <div class="replicants">
        <div class="replicant" ng-repeat="(tier, n) in rule.tieredReplicants">
          <span class="value">{{ n }}</span> in
          <span class="tier" ng-class="tier">{{ tier | tierName}}</span>
        </div>
      </div>
    </div>
  </div>

  <div class="timeline">
    <h2>
      Timeline (unreplicated)
      <div>
        <div ng-if="unreplicatedSegmentSize" class="summary">
          <div>
            {{ unreplicatedSegmentSize | bytes }}
            over {{ dataSource.segments.interval.period().humanize() }}
          </div>
          <div>
            {{ dataSource.segments.interval.start().format("MMM Do YYYY") }}
            to {{ dataSource.segments.interval.end().format("MMM Do YYYY") }}
          </div>
        </div>
        <div class="download" ng-if="days">
          <div class="btn-group">
            <button ng-csv="getDaily"
              filename="{{ dataSource.id }}-daily-unrepl.csv"
              csv-header="['date', 'bytes', 'shard count', 'start', 'end']"
              lazy-load="true"
              type="button" class="btn btn-default"
              title="download daily summary (unreplicated)"
            >daily <i class="fa fa-cloud-download"></i></button>
            <button ng-csv="getMonthly"
              filename="{{ dataSource.id }}-monthly-unrepl.csv"
              csv-header="['month', 'bytes', 'shard count', 'start', 'end']"
              lazy-load="true"
              type="button" class="btn btn-default"
              title="download monthly summary (unreplicated)"
            >monthly <i class="fa fa-cloud-download"></i></button>
          </div>
        </div>
      </div>

    </h2>
    <div>
      <div ng-if="days && dataSource.hasOwnProperty('rules')">
        <div timeline></div>
      </div>
    </div>
  </div>

  <div id="middle">

    <div id="intervals-segments">

      <div class="intervals-master">
        <div ng-if="!intervals" class="loading">
          <h2>Loading intervals</h2>
          <div id="floatingCirclesG">
            <div class="f_circleG" ng-repeat="i in [1,2,3,4,5,6,7,8]" id="frotateG_0{{i}}"></div>
          </div>
        </div>

        <div class="dynamic-list" ng-if="intervals">
          <h2>
            <span class="badge">{{ dataSummary.count | number }}</span> shards in
            <span class="badge">{{ intervals.length | number }}</span> intervals
          </h2>
          <table class="intervals">
            <thead><tr>
              <th><input ng-model="interval" placeholder="search intervals"></th>
              <th class="count">#</th>
              <th class="size">size</th>
            </tr></thead>
            <tbody>
              <tr class="interval"
                ng-repeat="interval in intervals | startsWith:interval"
                ng-click="selectInterval(interval)"
              >
                <td class="interval-start">
                  {{ interval.interval.substring(0,10) }}<span class="sep">T</span>{{ interval.interval.substring(11,13) }}
                </td>
                <td class="count">{{ interval.count }}</td>
                <td class="size">{{ interval.size | bytes }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="intervals-detail">
        <div class="no-interval-selected" ng-if="!selectedInterval">
          <h2>
             Interval Detail
          </h2>
          <div class="info" ng-if="intervals">
            <div>Click on an interval in the list to see all shards for that interval.</div>
          </div>
        </div>
        <div class="interval-selected" ng-if="selectedInterval">

          <h2>
            {{ selectedInterval.count | number}} shard{{ selectedInterval.count > 1 ? 's' : '' }} ({{ selectedInterval.size | bytes }}) for
            <span class="interval-start">
              {{ selectedInterval.interval.substring(0,10) }}<span class="sep">T</span>{{ selectedInterval.interval.substring(11,13) }}
            </span>
            to
            <span class="interval-end">
              {{ selectedInterval.interval.substring(25,35) }}<span class="sep">T</span>{{ selectedInterval.interval.substring(36,38) }}
            </span>
          </h2>

          <div class="segments">

            <div ng-if="!selectedSegments" class="loading">
              <div id="floatingCirclesG">
                <div class="f_circleG" ng-repeat="i in [1,2,3,4,5,6,7,8]" id="frotateG_0{{i}}"></div>
              </div>
              <div>Loading shards for {{ selectedInterval.interval }}</div>
            </div>

            <div class="segment" ng-repeat="(i, seg) in selectedSegments">

              <div>
                <div class="segment-id">

                  <a href="{{ segUrl(seg.identifier) }}">
                    {{ seg.identifier }}
                  </a>
                </div>
              </div>

              <div class="summary">
                <div class="size">{{ seg.size | bytes }}</div>

                <div ng-switch on="seg.shardSpec.type">
                  <div ng-switch-when="none">unsharded</div>
                  <div ng-switch-when="hashed">
                    shard {{ seg.shardSpec.partitionNum }}
                    ({{ seg.shardSpec.partitionNum + 1 }} of {{ seg.shardSpec.partitions }}, {{ seg.shardSpec.type }})
                  </div>
                  <div ng-switch-when="numbered">
                    shard {{ seg.shardSpec.partitionNum }}
                    ({{ seg.shardSpec.partitionNum + 1 }} of {{ seg.shardSpec.partitions }}, {{ seg.shardSpec.type }})
                  </div>
                  <div ng-switch-when="linear">
                    shard {{ seg.shardSpec.partitionNum }}
                    ({{ seg.shardSpec.partitionNum + 1 }} of {{ Object.keys(selectedSegments).length }}, {{ seg.shardSpec.type }})
                  </div>
                  <div ng-switch-when="single" ng-init="showShardRange = false"  ng-click="showShardRange = !showShardRange">
                    shard {{ seg.shardSpec.partitionNum }} ({{ seg.shardSpec.partitionNum +1 }} of {{ Object.keys(selectedSegments).length }} on {{ seg.shardSpec.dimension }})
                    <div class="value" ng-show="showShardRange">({{ seg.shardSpec.start == null ? 'null' : seg.shardSpec.start }} to {{ seg.shardSpec.end == null ? 'null' : seg.shardSpec.end }})</div>
                  </div>
                  <div ng-switch-default>shard {{ seg.shardSpec.partitionNum }} ({{ seg.shardSpec.type }})</div>
                </div>
                <div class="load-spec" ng-switch on="seg.loadSpec.type">
                  <div ng-switch-when="s3_zip" class="s3" clip-copy="s3Path(seg)">
                    copy s3 <i class="fa fa-clipboard"></i>
                  </div>
                  <div ng-switch-default>{{ seg.loadSpec }}</div>
                </div>
              </div>

              <div class="specifics">
                <div class="servers">
                  <div class="server" ng-repeat="s in seg.servers">
                    <span class="hostname">{{ s.substr(0, s.indexOf(':')) }}</span>
                    <span ng-if="servers" class="tier" ng-class="serverTiers[s].tier">{{ serverTiers[s] }}</span>
                  </div>
                </div>
                <div class="version">v{{ seg.version }}</div>
                <div class="binary-version">bin ver {{ seg.binaryVersion }}</div>
              </div>

              <div class="dimensions-metrics">
                <div class="dimensions" ng-init="showDims = false"  >
                  <button href="#" class="btn btn-default btn-sm" ng-class="showDims ? 'active' : ''" ng-click="showDims = !showDims">{{ seg.dimensions.split(",").length }} dimensions</button>
                  <div class="value" ng-show="showDims">{{ seg.dimensions | commasToSpaces }}</div>
                </div>

                <div class="metrics" ng-init="showMets = false">
                  <button href="#" class="btn btn-default btn-sm" ng-class="showMets ? 'active' : ''" ng-click="showMets = !showMets">{{ seg.metrics.split(",").length }} metrics</button>
                  <div class="value" ng-show="showMets">{{ seg.metrics | commasToSpaces  }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
